import React,{Component} from 'react';
import {Layout} from "antd";
import './designer.less';
import { WidthProvider, Responsive } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

const { Header, Sider, Content } = Layout;
const ResponsiveReactGridLayout = WidthProvider(Responsive);

class Designer extends Component{

    constructor(props){
        super(props);

        this.state = {
            layouts: {},
            widgets: []
        }
    }

    render() {
        return(
            <Layout style={{height:'100%'}} className='designer_main'>
                <Header className={'header'}>工具栏</Header>
                <Layout style={{height:'100%'}}>
                    <Sider className={'left_sider'}>左侧</Sider>
                    <Content>
                        <ResponsiveReactGridLayout  className="layout"
                            layouts={this.state.layouts}
                            cols={{lg: 48, md: 40, sm: 24, xs: 16, xxs: 8}}
                            rowHeight={10}
                        >
                            <div key="a" data-grid={{i: 'a', x: 1, y: 1, w: 2, h: 2}}>a</div>
                        </ResponsiveReactGridLayout>
                    </Content>
                    <Sider className={'right_sider'}>右侧</Sider>
                </Layout>
            </Layout>
        );
    }
}

export default Designer;